<template>
  <ul>
    <li v-for="(item, index) in imgSrcList" :key="index">
      <img width="360" height="500" v-Lazy="item" />
    </li>
  </ul>
</template>

<script setup lang="ts">
import type { Directive } from 'vue'
import { ref, reactive } from 'vue'
// 首先引入全部图片
// 这是vite工具提供的一个批量引入文件的方法，eager为true代表直接引入
const imageList: Record<string, { default: string }> = import.meta.glob('./assets/images/*.*', {
  eager: true
})
// 得到的是一个对象嵌套对象的结构，我们只需要里面对象的值
const imgSrcListArr: Array<{ default: string }> = Object.values(imageList)
// 我们进一步操作，取出里面的图片路径
const imgSrcList = imgSrcListArr.map((item) => item.default)
console.log(imgSrcList)
// 我们来自定义一个图片懒加载指令
const vLazy: Directive<HTMLImageElement, string> = (el, binding) => {
  // 实例化IntersectionObserver，用于监听一个元素是否处于可视窗口
  const observer = new IntersectionObserver((entries) => {
    // entries[0].intersectionRatio值等于1则代表元素完全展示在可视区域
    // 大于0小于1代表该元素部分展示可视窗口
    if (entries[0].intersectionRatio > 0) {
      // 这里加个延时器更好观看效果
      setTimeout(() => {
        el.src = binding.value
        // 赋值完成，目标达到，取消对该元素的监听
        observer.unobserve(el)
      },100)
    }
  })
  // 开始监听某个元素
  observer.observe(el)
}
</script>

<style scoped></style>
